a{
    text-decoration: none;
}
.top-bar{
    width: 100%;
    height: 35px;        
    border-bottom:1px solid rgba(133,133,133,0.15);
    .top-bar-content{
        width:80%;
        height: 41px;
        margin:0 auto;

        display:flex;
        flex-flow:row nowrap;
        justify-content: flex-end;
        .top-bar-icon{
            line-height: 41px;
            text-align: center;
            margin-left:15px;
            font-size:12px;
            color:#999999;
            position: relative;
            a{
                color:#999999;
            }
            i{
                color:pink;
                margin-right:5px;
            }
            &:not(.top-bar-about)::after{
                content:'|';
                margin-left:15px;
            }
            &:nth-child(4)::after{
                content: '';
                width: 0;
                height: 0;
                border:3px solid;
                position:absolute;
                right:-12px;
                bottom:14px;
                border-color:#999 transparent transparent;
            }
        }
    }
}

.search-wrapper{
    width: 100%;
    height: 100px;
    .search-content{
        display:flex;
        height: 100%;
        margin:0 auto;
        width:80%;
        justify-content: flex-start;
        align-items:center;
        .search-content-icon{
            &:first-child{
                flex:0 0 150px;
            }
            &:nth-child(2){
                flex:0 0 111px;
                height: 100%;
                text-align:center;
                line-height:100px;
                margin-left:-36px;
                margin-right:31px;
                i{
                    color:#999999;
                    margin-right:5px;
                }
            }
            &:nth-child(3){
                display:flex;
                flex:0.7 1 749px;
                margin-right:15px;
                button{
                    width: 73px;
                    height: 44px;
                    background-color: #8D8D8D;
                    border-top-right-radius: 10px;
                    border-bottom-right-radius: 10px;
                    border:none;
                    i{
                        color:white;
                        font-size:20px;
                    }
                }
                input{
                    flex:1 1 618px;
                    padding-left:15px;
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                    height: 44px;
                    color:#999;
                    background-color: #F7F7F7;
                    border:none;
                    &:focus{
                        outline:none;
                    }
                }
            }
            &:nth-child(n+4){
                text-align: center;
                p{
                    font-size:12px;
                }
                i{
                    font-size:25px;
                    margin-bottom:5px;
                }
            }
            &:last-child{
                text-align:center;
                flex:1 1 100px;
                margin-left:50px;
                position: relative;
                i{
                    margin-right:3px;
                }
                span{
                    font-size:12px;
                    position:absolute;
                    top:50%;
                    transform: translate(0,-50%);
                }
            }
        }

        a{  
            color:#333333;
            flex:0 0 50px;
            &:first-child{
                flex:0 0 180px;
                text-align: center;
                img{
                    width: 70%;
                }
            }
        }
    }
}